<template>
  <div id="stacklinechart">
    <div id="stackline"></div>
    <div id="stacklineData">
      <template>
        <el-table :data="stackLineData" height="250" style="width: 100%;">
          <el-table-column prop="date" label="日期" align="center" header-align="center"></el-table-column>
          <el-table-column prop="food" label="食物"></el-table-column>
          <el-table-column prop="transportation" label="交通"></el-table-column>
          <el-table-column prop="education" label="教育"></el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>
<script>
import {StackLineChart} from './StackLineChart'
import * as d3 from 'd3'
export default {
  data () {
    return {
      stackLineChart: '',
      stackLineData: []
    }
  },
  mounted () {
    this.stackLineChart = new StackLineChart('stackline')
    this.getData()
  },
  methods: {
    async getData () {
      d3.csv('./static/data/stackBar.csv', data => {
        this.stackLineData = data.map(d => {
          return {
            date: d.date,
            food: +d.food,
            transportation: +d.transportation,
            education: +d.education
          }
        })
        this.stackLineChart.data = this.stackLineData
        this.stackLineChart.title = 'StackBar'
        this.stackLineChart.xLabel = '日期'
        this.stackLineChart.yLabel = ''
        this.stackLineChart.itemsName = ['food', 'transportation', 'education']
        this.stackLineChart.draw()
      })
    }
  }
}
</script>
<style scoped>
#stacklinechart {
  height: 100%;
  width: 100%;
}
#stackline {
  height: 70%;
  width: 100%;
}
#stacklineData {
  height: 30%;
  width: 100%;
}
</style>
